<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>礼物愿望推荐 - GiftSocial</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #6366f1;
            --primary-light: #eef2ff;
            --secondary: #ec4899;
            --secondary-light: #fee2e2;
            --light-gray: #f3f4f6;
            --dark-gray: #1f2937;
            --text-gray: #6b7280;
            --border-color: #e5e7eb;
        }
        
        body {
            background-color: #fafafa;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            color: var(--dark-gray);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
        }
        
        /* 头部样式 */
        .site-header {
            background-color: white;
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .logo i {
            font-size: 1.8rem;
        }
        
        .search-container {
            position: relative;
            max-width: 500px;
            width: 100%;
        }
        
        .search-input {
            background-color: var(--light-gray);
            border: none;
            padding: 0.6rem 1rem 0.6rem 2.5rem;
            border-radius: 8px;
            width: 100%;
        }
        
        .search-icon {
            position: absolute;
            left: 0.8rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-gray);
        }
        
        .search-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
        }
        
        .nav-links .nav-link {
            color: var(--dark-gray);
            font-weight: 500;
            margin-left: 1.5rem;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .nav-links .nav-link:hover,
        .nav-links .nav-link.active {
            color: var(--primary);
        }
        
        .avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            cursor: pointer;
            border: 2px solid transparent;
            transition: border-color 0.2s;
        }
        
        .avatar:hover {
            border-color: var(--primary);
        }
        
        /* 主体内容 */
        .main-content {
            padding: 2rem 0;
        }
        
        /* 页面标题和筛选 */
        .page-header {
            margin-bottom: 1.5rem;
        }
        
        .page-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--dark-gray);
        }
        
        .filter-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            border-radius: 10px;
            padding: 0.75rem 1.25rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .filter-dropdown {
            position: relative;
        }
        
        .filter-btn {
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 0.4rem 1rem;
            font-size: 0.9rem;
            color: var(--dark-gray);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s;
        }
        
        .filter-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .layout-controls {
            display: flex;
            gap: 0.5rem;
        }
        
        .layout-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .layout-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 愿望卡片样式 */
        .wish-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .wish-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .wish-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.08);
        }
        
        /* 图片容器 */
        .wish-images {
            position: relative;
            width: 100%;
            height: 200px;
            overflow: hidden;
        }
        
        .wish-images.no-image {
            background-color: var(--light-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-gray);
        }
        
        .wish-images.no-image i {
            font-size: 3rem;
        }
        
        .single-image {
            width: 100%;
            height: 100%;
        }
        
        .single-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .wish-card:hover .single-image img {
            transform: scale(1.05);
        }
        
        .multiple-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 2px;
            width: 100%;
            height: 100%;
        }
        
        .image-item {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 0.75rem;
        }
        
        /* 愿望内容 */
        .wish-content {
            padding: 1.25rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .wish-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.75rem;
            color: var(--dark-gray);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .wish-description {
            color: var(--text-gray);
            font-size: 0.9rem;
            margin-bottom: 1rem;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            flex-grow: 1;
        }
        
        /* 标签 */
        .wish-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .wish-tag {
            font-size: 0.8rem;
            padding: 0.2rem 0.6rem;
            border-radius: 4px;
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        /* 作者信息 */
        .wish-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-info {
            flex-grow: 1;
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.9rem;
            color: var(--dark-gray);
            text-decoration: none;
        }
        
        .author-name:hover {
            color: var(--primary);
        }
        
        .post-time {
            font-size: 0.75rem;
            color: var(--text-gray);
        }
        
        /* 统计信息 */
        .wish-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 0.75rem;
            border-top: 1px solid var(--border-color);
            font-size: 0.85rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            color: var(--text-gray);
        }
        
        /* 操作按钮 */
        .wish-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 1rem;
            gap: 0.5rem;
        }
        
        .action-button {
            flex: 1;
            padding: 0.5rem;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .action-button.primary {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .action-button.primary:hover {
            background-color: #5254f5;
        }
        
        .action-button:hover {
            background-color: var(--light-gray);
        }
        
        .action-button.liked {
            color: var(--secondary);
            border-color: var(--secondary);
        }
        
        .action-button.saved {
            color: var(--primary);
            border-color: var(--primary);
        }
        
        /* 列表布局 */
        .list-layout {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        
        .list-item {
            display: flex;
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .list-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.08);
        }
        
        .list-image-container {
            width: 200px;
            flex-shrink: 0;
        }
        
        .list-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .list-image.no-image {
            background-color: var(--light-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-gray);
            height: 100%;
        }
        
        .list-content {
            flex-grow: 1;
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
        }
        
        .list-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.75rem;
        }
        
        .list-title {
            font-weight: 600;
            font-size: 1.25rem;
            color: var(--dark-gray);
            max-width: 70%;
        }
        
        .list-actions {
            display: flex;
            gap: 0.75rem;
        }
        
        .list-action-btn {
            background: none;
            border: none;
            color: var(--text-gray);
            cursor: pointer;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            font-size: 0.9rem;
        }
        
        .list-action-btn:hover {
            color: var(--primary);
        }
        
        .list-action-btn.liked {
            color: var(--secondary);
        }
        
        .list-action-btn.saved {
            color: var(--primary);
        }
        
        .list-description {
            color: var(--text-gray);
            font-size: 0.95rem;
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        
        .list-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }
        
        .list-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .list-stats {
            display: flex;
            gap: 1.5rem;
            font-size: 0.9rem;
        }
        
        /* 紧凑布局 */
        .compact-layout {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .compact-item {
            display: flex;
            background-color: white;
            border-radius: 10px;
            padding: 1rem;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            transition: transform 0.2s;
        }
        
        .compact-item:hover {
            transform: translateX(4px);
        }
        
        .compact-image {
            width: 80px;
            height: 80px;
            border-radius: 6px;
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .compact-image.no-image {
            background-color: var(--light-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-gray);
        }
        
        .compact-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .compact-content {
            flex-grow: 1;
            margin-left: 1rem;
            display: flex;
            flex-direction: column;
        }
        
        .compact-title {
            font-weight: 500;
            font-size: 1rem;
            margin-bottom: 0.25rem;
            color: var(--dark-gray);
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .compact-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.5rem;
            font-size: 0.8rem;
            color: var(--text-gray);
        }
        
        .compact-author {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .compact-author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .compact-stats {
            display: flex;
            gap: 1rem;
        }
        
        .compact-actions {
            display: flex;
            gap: 0.5rem;
            margin-left: 1rem;
        }
        
        .compact-action-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid var(--border-color);
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-gray);
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .compact-action-btn:hover {
            background-color: var(--light-gray);
        }
        
        .compact-action-btn.liked {
            color: var(--secondary);
            border-color: var(--secondary);
        }
        
        .compact-action-btn.saved {
            color: var(--primary);
            border-color: var(--primary);
        }
        
        /* 加载更多 */
        .load-more {
            text-align: center;
            margin: 2rem 0;
        }
        
        .load-more-btn {
            background-color: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            border-radius: 8px;
            padding: 0.6rem 2rem;
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .load-more-btn:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .load-more-btn .spinner {
            display: none;
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .wish-cards {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
            
            .list-image-container {
                width: 160px;
            }
        }
        
        @media (max-width: 768px) {
            .search-container {
                max-width: 200px;
            }
            
            .nav-text {
                display: none;
            }
            
            .nav-links .nav-link {
                margin-left: 0.75rem;
            }
            
            .filter-bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .layout-controls {
                align-self: flex-end;
            }
            
            .list-item {
                flex-direction: column;
            }
            
            .list-image-container {
                width: 100%;
                height: 200px;
            }
            
            .list-header {
                flex-direction: column;
                gap: 0.75rem;
            }
            
            .list-title {
                max-width: 100%;
            }
            
            .list-footer {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.75rem;
            }
        }
        
        @media (max-width: 576px) {
            .search-container {
                display: none;
            }
            
            .main-content {
                padding: 1rem 0;
            }
            
            .wish-cards {
                grid-template-columns: 1fr;
            }
            
            .wish-images {
                height: 180px;
            }
            
            .filter-options {
                width: 100%;
                gap: 0.5rem;
            }
            
            .filter-btn {
                padding: 0.3rem 0.75rem;
                font-size: 0.85rem;
            }
            
            .compact-content {
                margin-left: 0.75rem;
            }
            
            .compact-stats {
                display: none;
            }
        }
    </style>
</head>
<body>
    <!-- 网站头部 -->
    <header class="site-header py-3">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <a href="#" class="logo">
                    <i class="fas fa-gift"></i>
                    GiftSocial
                </a>
                
                <div class="search-container">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="search-input" placeholder="搜索礼物愿望...">
                </div>
                
                <nav class="nav-links d-flex align-items-center">
                    <a href="#" class="nav-link">
                        <i class="fas fa-home"></i>
                        <span class="nav-text">首页</span>
                    </a>
                    <a href="#" class="nav-link active">
                        <i class="fas fa-list"></i>
                        <span class="nav-text">愿望推荐</span>
                    </a>
                    <a href="#" class="nav-link">
                        <i class="fas fa-plus-circle"></i>
                        <span class="nav-text">发布愿望</span>
                    </a>
                    <a href="#" class="nav-link">
                        <i class="fas fa-bell"></i>
                        <span class="nav-text">通知</span>
                    </a>
                    <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="avatar ms-2">
                </nav>
            </div>
        </div>
    </header>
    
    <!-- 主体内容区 -->
    <div class="main-content">
        <div class="container">
            <div class="page-header">
                <h1 class="page-title">礼物愿望推荐</h1>
                
                <div class="filter-bar">
                    <div class="filter-options">
                        <div class="filter-dropdown">
                            <button class="filter-btn">
                                <i class="fas fa-tag"></i>
                                分类
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                        
                        <div class="filter-dropdown">
                            <button class="filter-btn">
                                <i class="fas fa-calendar"></i>
                                最新发布
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                        
                        <div class="filter-dropdown">
                            <button class="filter-btn">
                                <i class="fas fa-fire"></i>
                                热门程度
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                        
                        <div class="filter-dropdown">
                            <button class="filter-btn">
                                <i class="fas fa-image"></i>
                                图片设置
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="layout-controls">
                        <button class="layout-btn active" id="grid-layout" title="网格布局">
                            <i class="fas fa-th"></i>
                        </button>
                        <button class="layout-btn" id="list-layout" title="列表布局">
                            <i class="fas fa-list"></i>
                        </button>
                        <button class="layout-btn" id="compact-layout" title="紧凑布局">
                            <i class="fas fa-align-left"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 网格布局容器 -->
            <div class="wish-container" id="wish-container">
                <!-- 有单张图片的愿望 -->
                <div class="wish-card grid-item">
                    <div class="wish-images">
                        <div class="single-image">
                            <img src="https://picsum.photos/600/400?random=10" alt="复古相机图片">
                        </div>
                    </div>
                    
                    <div class="wish-content">
                        <h3 class="wish-title">复古胶片相机</h3>
                        
                        <p class="wish-description">一直想要一台复古胶片相机，喜欢胶片带来的独特质感和色彩。希望能记录生活中的美好瞬间，体验慢摄影的乐趣。</p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">摄影</span>
                            <span class="wish-tag">复古</span>
                            <span class="wish-tag">爱好</span>
                        </div>
                        
                        <div class="wish-author">
                            <img src="https://picsum.photos/100/100?random=20" alt="作者头像" class="author-avatar">
                            <div class="author-info">
                                <a href="#" class="author-name">摄影师小林</a>
                                <div class="post-time">3天前发布</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>1.2k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>36</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>215</span>
                            </div>
                        </div>
                        
                        <div class="wish-actions">
                            <button class="action-button like-btn">
                                <i class="far fa-heart"></i>
                                喜欢
                            </button>
                            <button class="action-button save-btn">
                                <i class="far fa-bookmark"></i>
                                收藏
                            </button>
                            <button class="action-button primary">
                                <i class="far fa-comment"></i>
                                留言
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 有多张图片的愿望 -->
                <div class="wish-card grid-item">
                    <div class="wish-images">
                        <div class="multiple-images">
                            <div class="image-item">
                                <img src="https://picsum.photos/300/300?random=11" alt="露营装备图片1">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/300/300?random=12" alt="露营装备图片2">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/300/300?random=13" alt="露营装备图片3">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/300/300?random=14" alt="露营装备图片4">
                            </div>
                        </div>
                        <div class="image-count">4张图片</div>
                    </div>
                    
                    <div class="wish-content">
                        <h3 class="wish-title">全套露营装备</h3>
                        
                        <p class="wish-description">计划今年夏天多去户外露营，希望能有一套完整的露营装备，包括帐篷、睡袋、折叠桌椅和炊具套装，能让露营体验更舒适。</p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">户外</span>
                            <span class="wish-tag">露营</span>
                            <span class="wish-tag">运动</span>
                        </div>
                        
                        <div class="wish-author">
                            <img src="https://picsum.photos/100/100?random=21" alt="作者头像" class="author-avatar">
                            <div class="author-info">
                                <a href="#" class="author-name">户外爱好者阿强</a>
                                <div class="post-time">1周前发布</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>2.5k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>89</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>432</span>
                            </div>
                        </div>
                        
                        <div class="wish-actions">
                            <button class="action-button like-btn liked">
                                <i class="fas fa-heart"></i>
                                喜欢
                            </button>
                            <button class="action-button save-btn">
                                <i class="far fa-bookmark"></i>
                                收藏
                            </button>
                            <button class="action-button primary">
                                <i class="far fa-comment"></i>
                                留言
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 没有图片的愿望 -->
                <div class="wish-card grid-item">
                    <div class="wish-images no-image">
                        <i class="fas fa-music"></i>
                    </div>
                    
                    <div class="wish-content">
                        <h3 class="wish-title">年度音乐会员</h3>
                        
                        <p class="wish-description">希望能获得一个年度音乐会员，这样就能无限制收听喜欢的音乐，发现更多新的歌手和专辑，享受高品质的音乐体验。</p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">音乐</span>
                            <span class="wish-tag">数字</span>
                            <span class="wish-tag">娱乐</span>
                        </div>
                        
                        <div class="wish-author">
                            <img src="https://picsum.photos/100/100?random=22" alt="作者头像" class="author-avatar">
                            <div class="author-info">
                                <a href="#" class="author-name">音乐发烧友</a>
                                <div class="post-time">2天前发布</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>856</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>24</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>156</span>
                            </div>
                        </div>
                        
                        <div class="wish-actions">
                            <button class="action-button like-btn">
                                <i class="far fa-heart"></i>
                                喜欢
                            </button>
                            <button class="action-button save-btn saved">
                                <i class="fas fa-bookmark"></i>
                                收藏
                            </button>
                            <button class="action-button primary">
                                <i class="far fa-comment"></i>
                                留言
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 有单张图片的愿望 -->
                <div class="wish-card grid-item">
                    <div class="wish-images">
                        <div class="single-image">
                            <img src="https://picsum.photos/600/400?random=15" alt="手工笔记本图片">
                        </div>
                    </div>
                    
                    <div class="wish-content">
                        <h3 class="wish-title">手工皮质笔记本</h3>
                        
                        <p class="wish-description">寻找一款高品质的手工皮质笔记本，用来记录日常灵感和想法。喜欢真皮的质感和随着使用而产生的独特包浆。</p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">文具</span>
                            <span class="wish-tag">手工</span>
                            <span class="wish-tag">写作</span>
                        </div>
                        
                        <div class="wish-author">
                            <img src="https://picsum.photos/100/100?random=23" alt="作者头像" class="author-avatar">
                            <div class="author-info">
                                <a href="#" class="author-name">作家小雅</a>
                                <div class="post-time">5天前发布</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>987</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>42</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>189</span>
                            </div>
                        </div>
                        
                        <div class="wish-actions">
                            <button class="action-button like-btn">
                                <i class="far fa-heart"></i>
                                喜欢
                            </button>
                            <button class="action-button save-btn">
                                <i class="far fa-bookmark"></i>
                                收藏
                            </button>
                            <button class="action-button primary">
                                <i class="far fa-comment"></i>
                                留言
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 有多张图片的愿望 -->
                <div class="wish-card grid-item">
                    <div class="wish-images">
                        <div class="multiple-images">
                            <div class="image-item">
                                <img src="https://picsum.photos/300/300?random=16" alt="烘焙工具图片1">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/300/300?random=17" alt="烘焙工具图片2">
                            </div>
                            <div class="image-item">
                                <img src="https://picsum.photos/300/300?random=18" alt="烘焙工具图片3">
                            </div>
                        </div>
                        <div class="image-count">3张图片</div>
                    </div>
                    
                    <div class="wish-content">
                        <h3 class="wish-title">专业烘焙工具套装</h3>
                        
                        <p class="wish-description">最近迷上了烘焙，希望能有一套专业的烘焙工具，包括各种模具、搅拌器和烤箱温度计，这样就能做出更精致的甜点了。</p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">烘焙</span>
                            <span class="wish-tag">美食</span>
                            <span class="wish-tag">厨房</span>
                        </div>
                        
                        <div class="wish-author">
                            <img src="https://picsum.photos/100/100?random=24" alt="作者头像" class="author-avatar">
                            <div class="author-info">
                                <a href="#" class="author-name">甜点师莉莉</a>
                                <div class="post-time">10天前发布</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>1.8k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>67</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>324</span>
                            </div>
                        </div>
                        
                        <div class="wish-actions">
                            <button class="action-button like-btn liked">
                                <i class="fas fa-heart"></i>
                                喜欢
                            </button>
                            <button class="action-button save-btn saved">
                                <i class="fas fa-bookmark"></i>
                                收藏
                            </button>
                            <button class="action-button primary">
                                <i class="far fa-comment"></i>
                                留言
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 没有图片的愿望 -->
                <div class="wish-card grid-item">
                    <div class="wish-images no-image">
                        <i class="fas fa-plane"></i>
                    </div>
                    
                    <div class="wish-content">
                        <h3 class="wish-title">周末温泉度假套餐</h3>
                        
                        <p class="wish-description">希望能有一个周末温泉度假套餐，远离城市的喧嚣，放松身心。最好包含住宿和温泉门票，能好好享受两天的宁静时光。</p>
                        
                        <div class="wish-tags">
                            <span class="wish-tag">旅行</span>
                            <span class="wish-tag">休闲</span>
                            <span class="wish-tag">体验</span>
                        </div>
                        
                        <div class="wish-author">
                            <img src="https://picsum.photos/100/100?random=25" alt="作者头像" class="author-avatar">
                            <div class="author-info">
                                <a href="#" class="author-name">上班族小明</a>
                                <div class="post-time">1天前发布</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>2.1k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>78</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>521</span>
                            </div>
                        </div>
                        
                        <div class="wish-actions">
                            <button class="action-button like-btn">
                                <i class="far fa-heart"></i>
                                喜欢
                            </button>
                            <button class="action-button save-btn">
                                <i class="far fa-bookmark"></i>
                                收藏
                            </button>
                            <button class="action-button primary">
                                <i class="far fa-comment"></i>
                                留言
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 加载更多 -->
            <div class="load-more">
                <button class="load-more-btn" id="load-more">
                    <span class="spinner"><i class="fas fa-spinner fa-spin"></i></span>
                    加载更多愿望
                </button>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 布局切换功能
            const gridLayoutBtn = document.getElementById('grid-layout');
            const listLayoutBtn = document.getElementById('list-layout');
            const compactLayoutBtn = document.getElementById('compact-layout');
            const wishContainer = document.getElementById('wish-container');
            
            // 存储原始卡片数据
            const originalItems = Array.from(wishContainer.innerHTML);
            
            // 切换到网格布局
            gridLayoutBtn.addEventListener('click', function() {
                setActiveLayoutBtn(this);
                wishContainer.className = 'wish-container wish-cards';
                convertToGridLayout();
            });
            
            // 切换到列表布局
            listLayoutBtn.addEventListener('click', function() {
                setActiveLayoutBtn(this);
                wishContainer.className = 'wish-container list-layout';
                convertToListLayout();
            });
            
            // 切换到紧凑布局
            compactLayoutBtn.addEventListener('click', function() {
                setActiveLayoutBtn(this);
                wishContainer.className = 'wish-container compact-layout';
                convertToCompactLayout();
            });
            
            // 设置当前激活的布局按钮
            function setActiveLayoutBtn(btn) {
                document.querySelectorAll('.layout-btn').forEach(button => {
                    button.classList.remove('active');
                });
                btn.classList.add('active');
            }
            
            // 转换为网格布局
            function convertToGridLayout() {
                // 清空容器
                wishContainer.innerHTML = '';
                
                // 重新添加网格项
                const gridItems = [
                    // 有单张图片的愿望
                    createGridItem(
                        'https://picsum.photos/600/400?random=10', 
                        '复古胶片相机', 
                        '一直想要一台复古胶片相机，喜欢胶片带来的独特质感和色彩。希望能记录生活中的美好瞬间，体验慢摄影的乐趣。',
                        ['摄影', '复古', '爱好'],
                        'https://picsum.photos/100/100?random=20',
                        '摄影师小林',
                        '3天前发布',
                        '1.2k', '36', '215',
                        false, false
                    ),
                    
                    // 有多张图片的愿望
                    createGridItem(
                        null, 
                        '全套露营装备', 
                        '计划今年夏天多去户外露营，希望能有一套完整的露营装备，包括帐篷、睡袋、折叠桌椅和炊具套装，能让露营体验更舒适。',
                        ['户外', '露营', '运动'],
                        'https://picsum.photos/100/100?random=21',
                        '户外爱好者阿强',
                        '1周前发布',
                        '2.5k', '89', '432',
                        true, false,
                        4
                    ),
                    
                    // 没有图片的愿望
                    createGridItem(
                        null, 
                        '年度音乐会员', 
                        '希望能获得一个年度音乐会员，这样就能无限制收听喜欢的音乐，发现更多新的歌手和专辑，享受高品质的音乐体验。',
                        ['音乐', '数字', '娱乐'],
                        'https://picsum.photos/100/100?random=22',
                        '音乐发烧友',
                        '2天前发布',
                        '856', '24', '156',
                        false, true,
                        0, true
                    ),
                    
                    // 有单张图片的愿望
                    createGridItem(
                        'https://picsum.photos/600/400?random=15', 
                        '手工皮质笔记本', 
                        '寻找一款高品质的手工皮质笔记本，用来记录日常灵感和想法。喜欢真皮的质感和随着使用而产生的独特包浆。',
                        ['文具', '手工', '写作'],
                        'https://picsum.photos/100/100?random=23',
                        '作家小雅',
                        '5天前发布',
                        '987', '42', '189',
                        false, false
                    ),
                    
                    // 有多张图片的愿望
                    createGridItem(
                        null, 
                        '专业烘焙工具套装', 
                        '最近迷上了烘焙，希望能有一套专业的烘焙工具，包括各种模具、搅拌器和烤箱温度计，这样就能做出更精致的甜点了。',
                        ['烘焙', '美食', '厨房'],
                        'https://picsum.photos/100/100?random=24',
                        '甜点师莉莉',
                        '10天前发布',
                        '1.8k', '67', '324',
                        true, true,
                        3
                    ),
                    
                    // 没有图片的愿望
                    createGridItem(
                        null, 
                        '周末温泉度假套餐', 
                        '希望能有一个周末温泉度假套餐，远离城市的喧嚣，放松身心。最好包含住宿和温泉门票，能好好享受两天的宁静时光。',
                        ['旅行', '休闲', '体验'],
                        'https://picsum.photos/100/100?random=25',
                        '上班族小明',
                        '1天前发布',
                        '2.1k', '78', '521',
                        false, false,
                        0, true, 'fas fa-plane'
                    )
                ];
                
                gridItems.forEach(item => {
                    wishContainer.appendChild(item);
                });
                
                // 重新绑定事件
                bindEvents();
            }
            
            // 转换为列表布局
            function convertToListLayout() {
                // 清空容器
                wishContainer.innerHTML = '';
                
                // 添加列表项
                const listItems = [
                    // 有单张图片的愿望
                    createListItem(
                        'https://picsum.photos/600/400?random=10', 
                        '复古胶片相机', 
                        '一直想要一台复古胶片相机，喜欢胶片带来的独特质感和色彩。希望能记录生活中的美好瞬间，体验慢摄影的乐趣。这是我一直以来的梦想，希望能有机会实现。',
                        ['摄影', '复古', '爱好'],
                        'https://picsum.photos/100/100?random=20',
                        '摄影师小林',
                        '3天前发布',
                        '1.2k', '36', '215',
                        false, false
                    ),
                    
                    // 有多张图片的愿望
                    createListItem(
                        'https://picsum.photos/600/400?random=11', 
                        '全套露营装备', 
                        '计划今年夏天多去户外露营，希望能有一套完整的露营装备，包括帐篷、睡袋、折叠桌椅和炊具套装，能让露营体验更舒适。我已经选好了几个心仪的品牌和型号，预算在3000元左右。',
                        ['户外', '露营', '运动'],
                        'https://picsum.photos/100/100?random=21',
                        '户外爱好者阿强',
                        '1周前发布',
                        '2.5k', '89', '432',
                        true, false,
                        true
                    ),
                    
                    // 没有图片的愿望
                    createListItem(
                        null, 
                        '年度音乐会员', 
                        '希望能获得一个年度音乐会员，这样就能无限制收听喜欢的音乐，发现更多新的歌手和专辑，享受高品质的音乐体验。主要听流行、摇滚和古典音乐，偏好Spotify或Apple Music。',
                        ['音乐', '数字', '娱乐'],
                        'https://picsum.photos/100/100?random=22',
                        '音乐发烧友',
                        '2天前发布',
                        '856', '24', '156',
                        false, true,
                        false, true, 'fas fa-music'
                    )
                ];
                
                listItems.forEach(item => {
                    wishContainer.appendChild(item);
                });
                
                // 重新绑定事件
                bindEvents();
            }
            
            // 转换为紧凑布局
            function convertToCompactLayout() {
                // 清空容器
                wishContainer.innerHTML = '';
                
                // 添加紧凑项
                const compactItems = [
                    // 有单张图片的愿望
                    createCompactItem(
                        'https://picsum.photos/600/400?random=10', 
                        '复古胶片相机', 
                        '摄影师小林',
                        '3天前发布',
                        '1.2k', '36', '215',
                        false, false
                    ),
                    
                    // 有多张图片的愿望
                    createCompactItem(
                        'https://picsum.photos/600/400?random=12', 
                        '全套露营装备', 
                        '户外爱好者阿强',
                        '1周前发布',
                        '2.5k', '89', '432',
                        true, false,
                        true
                    ),
                    
                    // 没有图片的愿望
                    createCompactItem(
                        null, 
                        '年度音乐会员', 
                        '音乐发烧友',
                        '2天前发布',
                        '856', '24', '156',
                        false, true,
                        false, true, 'fas fa-music'
                    ),
                    
                    // 有单张图片的愿望
                    createCompactItem(
                        'https://picsum.photos/600/400?random=15', 
                        '手工皮质笔记本', 
                        '作家小雅',
                        '5天前发布',
                        '987', '42', '189',
                        false, false
                    ),
                    
                    // 有多张图片的愿望
                    createCompactItem(
                        'https://picsum.photos/600/400?random=16', 
                        '专业烘焙工具套装', 
                        '甜点师莉莉',
                        '10天前发布',
                        '1.8k', '67', '324',
                        true, true,
                        true
                    ),
                    
                    // 没有图片的愿望
                    createCompactItem(
                        null, 
                        '周末温泉度假套餐', 
                        '上班族小明',
                        '1天前发布',
                        '2.1k', '78', '521',
                        false, false,
                        false, true, 'fas fa-plane'
                    )
                ];
                
                compactItems.forEach(item => {
                    wishContainer.appendChild(item);
                });
                
                // 重新绑定事件
                bindEvents();
            }
            
            // 创建网格项
            function createGridItem(imageUrl, title, description, tags, authorAvatar, authorName, postTime, views, comments, likes, isLiked, isSaved, imageCount = 1, noImage = false, iconClass = 'fas fa-gift') {
                const div = document.createElement('div');
                div.className = 'wish-card grid-item';
                
                let imagesHtml = '';
                if (noImage) {
                    imagesHtml = `
                        <div class="wish-images no-image">
                            <i class="${iconClass}"></i>
                        </div>
                    `;
                } else if (imageUrl) {
                    imagesHtml = `
                        <div class="wish-images">
                            <div class="single-image">
                                <img src="${imageUrl}" alt="${title}图片">
                            </div>
                        </div>
                    `;
                } else {
                    imagesHtml = `
                        <div class="wish-images">
                            <div class="multiple-images">
                                <div class="image-item">
                                    <img src="https://picsum.photos/300/300?random=${Math.floor(Math.random() * 100)}" alt="${title}图片1">
                                </div>
                                <div class="image-item">
                                    <img src="https://picsum.photos/300/300?random=${Math.floor(Math.random() * 100) + 100}" alt="${title}图片2">
                                </div>
                                <div class="image-item">
                                    <img src="https://picsum.photos/300/300?random=${Math.floor(Math.random() * 100) + 200}" alt="${title}图片3">
                                </div>
                                ${imageCount > 3 ? `
                                <div class="image-item">
                                    <img src="https://picsum.photos/300/300?random=${Math.floor(Math.random() * 100) + 300}" alt="${title}图片4">
                                </div>
                                ` : ''}
                            </div>
                            <div class="image-count">${imageCount}张图片</div>
                        </div>
                    `;
                }
                
                let tagsHtml = '';
                tags.forEach(tag => {
                    tagsHtml += `<span class="wish-tag">${tag}</span>`;
                });
                
                div.innerHTML = `
                    ${imagesHtml}
                    <div class="wish-content">
                        <h3 class="wish-title">${title}</h3>
                        
                        <p class="wish-description">${description}</p>
                        
                        <div class="wish-tags">
                            ${tagsHtml}
                        </div>
                        
                        <div class="wish-author">
                            <img src="${authorAvatar}" alt="作者头像" class="author-avatar">
                            <div class="author-info">
                                <a href="#" class="author-name">${authorName}</a>
                                <div class="post-time">${postTime}</div>
                            </div>
                        </div>
                        
                        <div class="wish-stats">
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>${views}</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>${comments}</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>${likes}</span>
                            </div>
                        </div>
                        
                        <div class="wish-actions">
                            <button class="action-button like-btn ${isLiked ? 'liked' : ''}">
                                <i class="${isLiked ? 'fas' : 'far'} fa-heart"></i>
                                喜欢
                            </button>
                            <button class="action-button save-btn ${isSaved ? 'saved' : ''}">
                                <i class="${isSaved ? 'fas' : 'far'} fa-bookmark"></i>
                                收藏
                            </button>
                            <button class="action-button primary">
                                <i class="far fa-comment"></i>
                                留言
                            </button>
                        </div>
                    </div>
                `;
                
                return div;
            }
            
            // 创建列表项
            function createListItem(imageUrl, title, description, tags, authorAvatar, authorName, postTime, views, comments, likes, isLiked, isSaved, hasMultipleImages = false, noImage = false, iconClass = 'fas fa-gift') {
                const div = document.createElement('div');
                div.className = 'list-item';
                
                let imageHtml = '';
                if (noImage) {
                    imageHtml = `
                        <div class="list-image-container">
                            <div class="list-image no-image">
                                <i class="${iconClass} fa-2x"></i>
                            </div>
                        </div>
                    `;
                } else {
                    imageHtml = `
                        <div class="list-image-container">
                            <img src="${imageUrl}" alt="${title}图片" class="list-image">
                            ${hasMultipleImages ? `<div class="image-count">+${Math.floor(Math.random() * 3) + 1}张</div>` : ''}
                        </div>
                    `;
                }
                
                let tagsHtml = '';
                tags.forEach(tag => {
                    tagsHtml += `<span class="wish-tag">${tag}</span>`;
                });
                
                div.innerHTML = `
                    ${imageHtml}
                    <div class="list-content">
                        <div class="list-header">
                            <h3 class="list-title">${title}</h3>
                            <div class="list-actions">
                                <button class="list-action-btn like-btn ${isLiked ? 'liked' : ''}">
                                    <i class="${isLiked ? 'fas' : 'far'} fa-heart"></i>
                                    <span>${likes}</span>
                                </button>
                                <button class="list-action-btn save-btn ${isSaved ? 'saved' : ''}">
                                    <i class="${isSaved ? 'fas' : 'far'} fa-bookmark"></i>
                                </button>
                                <button class="list-action-btn primary">
                                    <i class="far fa-comment"></i>
                                    <span>${comments}</span>
                                </button>
                            </div>
                        </div>
                        
                        <p class="list-description">${description}</p>
                        
                        <div class="wish-tags">
                            ${tagsHtml}
                        </div>
                        
                        <div class="list-footer">
                            <div class="list-author">
                                <img src="${authorAvatar}" alt="作者头像" class="author-avatar">
                                <div class="author-info">
                                    <a href="#" class="author-name">${authorName}</a>
                                    <div class="post-time">${postTime}</div>
                                </div>
                            </div>
                            
                            <div class="list-stats">
                                <div class="stat-item">
                                    <i class="fas fa-eye"></i>
                                    <span>${views} 浏览</span>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                
                return div;
            }
            
            // 创建紧凑项
            function createCompactItem(imageUrl, title, authorName, postTime, views, comments, likes, isLiked, isSaved, hasMultipleImages = false, noImage = false, iconClass = 'fas fa-gift') {
                const div = document.createElement('div');
                div.className = 'compact-item';
                
                let imageHtml = '';
                if (noImage) {
                    imageHtml = `
                        <div class="compact-image no-image">
                            <i class="${iconClass}"></i>
                        </div>
                    `;
                } else {
                    imageHtml = `
                        <div class="compact-image">
                            <img src="${imageUrl}" alt="${title}图片">
                            ${hasMultipleImages ? `<div class="image-count">+${Math.floor(Math.random() * 3) + 1}</div>` : ''}
                        </div>
                    `;
                }
                
                div.innerHTML = `
                    ${imageHtml}
                    <div class="compact-content">
                        <h3 class="compact-title">${title}</h3>
                        
                        <div class="compact-meta">
                            <div class="compact-author">
                                <img src="https://picsum.photos/100/100?random=${Math.floor(Math.random() * 100) + 300}" alt="作者头像" class="compact-author-avatar">
                                <span>${authorName}</span>
                                <span>·</span>
                                <span>${postTime}</span>
                            </div>
                            
                            <div class="compact-stats">
                                <span>${views} 浏览</span>
                                <span>·</span>
                                <span>${comments} 留言</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="compact-actions">
                        <button class="compact-action-btn like-btn ${isLiked ? 'liked' : ''}">
                            <i class="${isLiked ? 'fas' : 'far'} fa-heart"></i>
                        </button>
                        <button class="compact-action-btn save-btn ${isSaved ? 'saved' : ''}">
                            <i class="${isSaved ? 'fas' : 'far'} fa-bookmark"></i>
                        </button>
                    </div>
                `;
                
                return div;
            }
            
            // 绑定交互事件
            function bindEvents() {
                // 喜欢按钮事件
                document.querySelectorAll('.like-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        this.classList.toggle('liked');
                        const icon = this.querySelector('i');
                        
                        if (this.classList.contains('liked')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            
                            // 更新点赞数
                            if (this.querySelector('span') && this.querySelector('span').textContent.match(/\d+/)) {
                                const countElem = this.querySelector('span');
                                const count = parseInt(countElem.textContent);
                                countElem.textContent = (count + 1).toString();
                            }
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            
                            // 更新点赞数
                            if (this.querySelector('span') && this.querySelector('span').textContent.match(/\d+/)) {
                                const countElem = this.querySelector('span');
                                const count = parseInt(countElem.textContent);
                                countElem.textContent = (count - 1).toString();
                            }
                        }
                    });
                });
                
                // 收藏按钮事件
                document.querySelectorAll('.save-btn').forEach(btn => {
                    btn.addEventListener('click', function() {
                        this.classList.toggle('saved');
                        const icon = this.querySelector('i');
                        
                        if (this.classList.contains('saved')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                        }
                    });
                });
                
                // 留言按钮事件
                document.querySelectorAll('.action-button.primary, .list-action-btn.primary').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const title = this.closest('.wish-card, .list-item').querySelector('.wish-title, .list-title').textContent;
                        alert(`打开对"${title}"的留言框`);
                    });
                });
            }
            
            // 加载更多按钮
            document.getElementById('load-more').addEventListener('click', function() {
                const spinner = this.querySelector('.spinner');
                spinner.style.display = 'inline-block';
                this.disabled = true;
                
                // 模拟加载延迟
                setTimeout(() => {
                    spinner.style.display = 'none';
                    this.disabled = false;
                    
                    // 根据当前布局添加更多内容
                    if (wishContainer.classList.contains('wish-cards')) {
                        // 添加更多网格项
                        const newItem = createGridItem(
                            Math.random() > 0.3 ? `https://picsum.photos/600/400?random=${Math.floor(Math.random() * 1000)}` : null, 
                            `新增愿望 ${Math.floor(Math.random() * 100)}`, 
                            '这是一个新加载的愿望内容，展示了更多的礼物想法和需求。',
                            ['新增', '礼物', '愿望'],
                            `https://picsum.photos/100/100?random=${Math.floor(Math.random() * 1000)}`,
                            `用户${Math.floor(Math.random() * 1000)}`,
                            '刚刚发布',
                            `${Math.floor(Math.random() * 1000)}.${Math.floor(Math.random() * 9)}k`, 
                            `${Math.floor(Math.random() * 100)}`, 
                            `${Math.floor(Math.random() * 500)}`,
                            false, false,
                            Math.random() > 0.5 ? 3 : 1,
                            Math.random() > 0.7
                        );
                        wishContainer.appendChild(newItem);
                        bindEvents();
                    } else if (wishContainer.classList.contains('list-layout')) {
                        // 添加更多列表项
                        const newItem = createListItem(
                            Math.random() > 0.3 ? `https://picsum.photos/600/400?random=${Math.floor(Math.random() * 1000)}` : null, 
                            `新增愿望 ${Math.floor(Math.random() * 100)}`, 
                            '这是一个新加载的愿望内容，展示了更多的礼物想法和需求。这里有更多的文字描述，让内容更加丰富。',
                            ['新增', '礼物', '愿望'],
                            `https://picsum.photos/100/100?random=${Math.floor(Math.random() * 1000)}`,
                            `用户${Math.floor(Math.random() * 1000)}`,
                            '刚刚发布',
                            `${Math.floor(Math.random() * 1000)}.${Math.floor(Math.random() * 9)}k`, 
                            `${Math.floor(Math.random() * 100)}`, 
                            `${Math.floor(Math.random() * 500)}`,
                            false, false,
                            Math.random() > 0.5,
                            Math.random() > 0.7
                        );
                        wishContainer.appendChild(newItem);
                        bindEvents();
                    } else {
                        // 添加更多紧凑项
                        const newItem = createCompactItem(
                            Math.random() > 0.3 ? `https://picsum.photos/600/400?random=${Math.floor(Math.random() * 1000)}` : null, 
                            `新增愿望 ${Math.floor(Math.random() * 100)}`, 
                            `用户${Math.floor(Math.random() * 1000)}`,
                            '刚刚发布',
                            `${Math.floor(Math.random() * 1000)}.${Math.floor(Math.random() * 9)}k`, 
                            `${Math.floor(Math.random() * 100)}`, 
                            `${Math.floor(Math.random() * 500)}`,
                            false, false,
                            Math.random() > 0.5,
                            Math.random() > 0.7
                        );
                        wishContainer.appendChild(newItem);
                        bindEvents();
                    }
                }, 1500);
            });
            
            // 初始化绑定事件
            bindEvents();
        });
    </script>
</body>
</html>

